<template>
  <a-modal
    v-model:open="visible"
    title="上传列表"
    :footer="null"
    width="600px"
    class="upload-list-modal"
  >
    <div class="upload-list">
      <div v-for="task in uploadTasks" :key="task.id" class="upload-item">
        <div class="file-info">
          <div class="file-icon">
            <component :is="getFileIcon(task.fileType)" />
          </div>
          <div class="file-details">
            <div class="file-name">{{ task.fileName }}</div>
            <div class="file-size">{{ formatSize(task.fileSize) }}</div>
          </div>
        </div>

        <div class="upload-progress">
          <a-progress
            :percent="task.progress"
            :status="getProgressStatus(task.status)"
            :show-info="false"
            size="small"
          />
          <span class="progress-text" :class="task.status">
            {{ getStatusText(task) }}
          </span>
        </div>
      </div>

      <div v-if="uploadTasks.length === 0" class="empty-list">暂无上传任务</div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, defineExpose } from 'vue'
  import {
    FileOutlined,
    FileImageOutlined,
    PlaySquareOutlined,
    CustomerServiceOutlined,
    FilePdfOutlined,
    FileWordOutlined,
    FileExcelOutlined,
    FileTextOutlined,
    CodeOutlined,
    FileZipOutlined,
  } from '@ant-design/icons-vue'

  // 上传任务列表
  const uploadTasks = ref([])

  // 获取文件图标
  const getFileIcon = fileType => {
    const iconMap = {
      image: FileImageOutlined,
      video: PlaySquareOutlined,
      audio: CustomerServiceOutlined,
      pdf: FilePdfOutlined,
      word: FileWordOutlined,
      excel: FileExcelOutlined,
      text: FileTextOutlined,
      code: CodeOutlined,
      zip: FileZipOutlined,
    }
    return iconMap[fileType] || FileOutlined
  }

  // 添加上传任务
  const addUploadTask = task => {
    if (!task) return
    uploadTasks.value.push({
      ...task,
      fileName: task.fileName || '未知文件',
      fileSize: task.fileSize || 0,
      fileType: task.fileType || 'other',
      progress: task.progress || 0,
      status: task.status || 'uploading',
    })
  }

  // 更新上传进度
  const updateProgress = (taskId, progress) => {
    const task = uploadTasks.value.find(t => t.id === taskId)
    if (task) {
      task.progress = progress || 0
    }
  }

  // 更新任务状态
  const updateStatus = (taskId, status) => {
    const task = uploadTasks.value.find(t => t.id === taskId)
    if (task) {
      task.status = status || 'uploading'
    }
  }

  // 获取进度条状态
  const getProgressStatus = status => {
    switch (status) {
      case 'completed':
        return 'success'
      case 'failed':
        return 'exception'
      default:
        return 'active'
    }
  }

  // 获取状态文本
  const getStatusText = task => {
    if (!task) return ''
    switch (task.status) {
      case 'completed':
        return '上传完成'
      case 'failed':
        return '上传失败'
      default:
        return `${task.progress || 0}%`
    }
  }

  // 文件大小格式化
  const formatSize = size => {
    if (!size || isNaN(size)) return '0 B'
    const units = ['B', 'KB', 'MB', 'GB', 'TB']
    let index = 0
    let fileSize = Number(size)
    while (fileSize >= 1024 && index < units.length - 1) {
      fileSize /= 1024
      index++
    }
    return `${fileSize.toFixed(2)} ${units[index]}`
  }

  // 暴露方法给父组件
  defineExpose({
    addUploadTask,
    updateProgress,
    updateStatus,
  })
</script>

<style scoped>
  .upload-list-modal {
    :deep(.ant-modal-body) {
      padding: 0;
      max-height: 400px;
      overflow-y: auto;
    }
  }

  .upload-list {
    padding: 16px;
  }

  .upload-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
  }

  .upload-item:last-child {
    border-bottom: none;
  }

  .file-info {
    display: flex;
    align-items: center;
    flex: 1;
    margin-right: 16px;
    min-width: 0;
  }

  .file-icon {
    margin-right: 12px;
    font-size: 24px;
    color: #1890ff;
  }

  .file-details {
    flex: 1;
    min-width: 0;
  }

  .file-name {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .file-size {
    font-size: 12px;
    color: #999;
  }

  .upload-progress {
    width: 200px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  :deep(.ant-progress) {
    flex: 1;
    margin-right: 8px;
  }

  .progress-text {
    font-size: 12px;
    color: #666;
    width: 60px;
    text-align: right;
  }

  .progress-text.completed {
    color: #52c41a;
  }

  .progress-text.failed {
    color: #ff4d4f;
  }

  .empty-list {
    text-align: center;
    color: #999;
    padding: 32px 0;
  }
</style>
